<template>
  <ga-modal v-model:visible="visible" :width="915" @before-close="handleCancel(formRef)">
    <template #title>迁移</template>
    <ga-spin style="width: 100%" :loading="false">
      <ga-form ref="formRef" :model="formData">
        <ShadowBox title="已选中1台云主机基本信息" :headerBottom="false">
          <template #main_info>
            <div class="vm_info">
              <div class="flex_between_aligncenter">
                <p>名称</p>
                <p>IP</p>
                <p>宿主机</p>
                <p>配置</p>
                <p>系统盘</p>
                <p>外挂盘</p>
              </div>
              <div class="flex_between_aligncenter">
                <p>sfdasfsafdsaf</p>
                <p>10.189.111.123</p>
                <p>DEFWEFEWFDEF</p>
                <p>8CPU | 16GB</p>
                <p>100GB</p>
                <p>0GB | 0块</p>
                <!-- <p>{{ current?.cpuCores + "CPU" }} | {{ current?.memory / 1024 + "GB" }}</p>
              <p>{{ 999 }}GB</p>
              <p>{{ current?.cpuCores + "GB" }} | {{ 1 + "块" }}</p> -->
              </div>
            </div>
          </template>
        </ShadowBox>
        <BorderBox
          title="宿主机信息"
          :wrapperStyle="{
            marginTop: '8px',
          }"
          :styleText="{ padding: '0 8px 8px' }"
        >
          <template #main_info>
            <ga-form-item
              label="集群"
              style="margin-bottom: 4px"
              label-col-flex="40px"
              :rules="[RULE.NOT_NULL]"
            >
              <ga-radio-group type="button" size="small" v-model="formData.status">
                <ga-radio :value="false">当前集群</ga-radio>
                <ga-radio :value="true">其他集群</ga-radio>
              </ga-radio-group>
            </ga-form-item>
            <ga-form-item
              label-col-flex="40px"
              style="margin-bottom: 8px"
              v-if="formData.status"
            >
              <cusDropdown
                ref="cusDropdownRef"
                :areaList="areaList"
                size="small"
                title="集群"
                @change="handleSelect"
              />
            </ga-form-item>
            <ga-form-item label="云机" label-col-flex="40px" :rules="[RULE.NOT_NULL]">
              <ga-table
                style="margin-top: 8px"
                size="small"
                :scroll="{ y: 200 }"
                row-key="id"
                :loading="loading"
                :pagination="false"
                :row-selection="{ type: 'radio', width: 50 }"
                :columns="columns"
                :data="tableData"
                :bordered="false"
                :hoverable="false"
                v-model:selectedKeys="selectedId"
              >
                <template #name="{ record }">
                  <p>{{ record?.name || "-" }}</p>
                  <ga-link v-if="record?.disabled" :hoverable="false" status="danger">
                    虚拟机已经在该主机上
                  </ga-link>
                </template>
              </ga-table>
            </ga-form-item>
          </template>
        </BorderBox>
      </ga-form>
    </ga-spin>
    <template #footer>
      <ga-button @click="visible = false">取消</ga-button>
      <ga-button type="primary" @click="handleOk" :loading="okLoading"> 确定 </ga-button>
    </template>
  </ga-modal>
</template>
<script setup>
import { ref, h, reactive } from "vue";
import { createSnapshot } from "@/api/vm";
import { getHostList } from "@/api/hostMgmt";
import useLoading from "@/hooks/loading";
import TagStatus from "@/components/TagStatus/index.vue";
import usageRate from "common/usageRate.vue";
import { RULE } from "@/constant/validators";
import cusDropdown from "../common/cusDropdown.vue";

const { loading, setLoading } = useLoading(false);
const okLoading = ref(false);
const formData = reactive({
  status: false,
});
const listQuery = reactive({
  limit: -1,
  resourceId: "",
  clusterUuid: "",
});
const visible = ref(false);
const current = ref("");
const selectedId = ref([]);
const open = async (record) => {
  console.log("record", record);
  visible.value = true;
  if (record && record?.id) {
    current.value = record;
    listQuery.resourceId = record.resourceId;
    listQuery.clusterUuid = record.clusterUuid;
  }
  setLoading(true);
  fetchData();
};
const handleSelect = (item) => {
  if (!item) return;
  console.log("item=====", item);
};
// 获取计算方案列表
const tableData = ref([]);
const fetchData = async () => {
  setLoading(true);
  try {
    const { data } = await getHostList(listQuery);
    tableData.value = data.items;
    // tableData.value = data.items?.map((item) => ({
    //   ...item,
    //   disabled:
    //     item.vcpu === current.value?.cpuCores &&
    //     item.memory === current.value?.memory / 1024,
    // }));
  } finally {
    setLoading(false);
  }
};
const columns = [
  {
    title: "名称",
    slotName: "name",
  },
  {
    title: "状态",
    dataIndex: "status",
    width: 90,
    render: ({ record }) => h(TagStatus, { type: record.status }),
  },
  {
    title: "CPU使用率",
    dataIndex: "cpu",
    width: 180,
    render: ({ record }) =>
      h(usageRate, {
        total: record?.totalCpuCores,
        used: record?.usedCpuCores,
      }),
  },
  {
    title: "存储使用率",
    dataIndex: "disk",
    // width: 180,
    render: ({ record }) =>
      h(usageRate, { total: record?.totalDisk, used: record?.usedDisk }),
  },
];
const areaList = ref([
  { id: 1, name: "集群三(鲲鹏3.0)", xc: true },
  { id: 12, name: "集群16(海光高配)", xc: true },
  { id: 14, name: "海光超融合7390(集群五)" },
  { id: 33, name: "海光超融合7390(集群五)" },
  { id: 14, name: "海光超融合7390(集群五)" },
  { id: 545, name: "海光超融合" },
  { id: 1544, name: "高浮雕鬼地方(集群五)" },
  { id: 1454, name: "广告费(集群五)" },
  { id: 1454, name: "赣锋干(集群五)" },
  { id: 1874, name: "搞烦(集群五)" },
  { id: 174, name: "广泛广泛广泛(集群五)" },
  { id: 184, name: "广泛广泛(集群五)" },
  { id: 104, name: "广泛广泛刚刚发给(集群五)" },
]);
// 保存
const emits = defineEmits(["fetchData"]);
const handleOk = async () => {
  console.log("selectedId", selectedId.value);

  // if (!res) {
  okLoading.value = true;
  // try {
  //   const obj = formatVpcCreateParams(type, formData, tableData.value);
  //   const { code } = await createSnapshot(obj, "network-vpc");
  //   if (code === 20000) Message.success("操作成功");
  //   emits("fetchData");
  //   visible.value = false;
  // } finally {
  //   okLoading.value = true;
  // }
  // }
};
const formRef = ref(null);
const cusDropdownRef = ref(null);

const handleCancel = () => {
  if (formData.status) cusDropdownRef.value.cancel();
  formData.status = false;
  current.value = "";
  selectedId.value = [];
  tableData.value = [];
};
defineExpose({ open });
</script>
<style lang="scss" scoped></style>
